<template>
    <div class="content">
        <div class="content_opertors">
            <div class="left">
                <a-button type="primary" @click="refresh">刷新</a-button>
                <a-button type="primary">数据源管理</a-button>
                <a-button type="primary">收支项目管理</a-button>
                <a-button type="primary">预警等级管理</a-button>
            </div>
            <div class="right">
                <a-form :model="topForm" name="basic" layout="inline" autocomplete="off">
                    <a-form-item label="年度月份：" name="yearAndmonth" :rules="[{ required: true }]">
                        <a-date-picker v-model:value="topForm.yearAndmonth" picker="month" placeholder="---请选择---" />
                    </a-form-item>
                    <a-form-item label="金额单位：" name="amt_unit" :rules="[{ required: true }]">
                        <a-select v-model:value="topForm.amt_unit" style="width: 80px">
                            <a-select-option :value="1">元</a-select-option>
                            <a-select-option :value="10000">万元</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </div>
        </div>
        <div class="grid">
            <a-table
                :columns="columns"
                :data-source="data"
                :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
                :rowKey="record => record.mofDivCode"
                bordered
                size="small"
                :scroll="{ y: '64vh' }"
                :pagination="pagination"
                :loading="loading"
            >
                <template #headerCell="{ column }">
                    <template v-if="column.key === 'income01'"> 本月收入<br />（含政府性基金收入） </template>
                    <template v-if="column.key === 'pay01'"> 三保支出<br />（除工资） </template>
                </template>
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.key === 'warningLevel'">
                        <!-- {{record}} -->
                        <span v-if="text == 1" style="color: red">红色</span>
                        <span v-if="text == 2" style="color: orange">橙色</span>
                        <span v-if="text == 3" style="color: yellow">黄色</span>
                        <span v-if="text == 4" style="color: green">绿色</span>
                    </template>
                    <template v-if="column.progress === true">
                        <!-- {{text}} -->
                        <a-popover v-if="!!text">
                            <template #content>
                                <p>实际金额：{{ text.realAmt }}</p>
                                <p>计划金额：{{ text.planAmt }}</p>
                            </template>
                            <a-progress :percent="text.progress * 100" size="small" :format="(percent) => `${(text.progress * 100).toFixed(2)}% (${text.realAmt}/${text.planAmt}）`" />
                        </a-popover>
                    </template>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from 'vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

import { treasuryQuery } from '@/request/api/treasuryWarningPhoto';

// 右上角年度月份、金额单位表单数据
let topForm = ref({
    yearAndmonth: dayjs(),
    amt_unit: 10000,
});

// 表格相关数据
const columns = [
    {
        title: '区划编码',
        dataIndex: 'mofDivCode',
        key: 'mofDivCode',
        width: 100,
        align: 'center',
        fixed: 'left',
    },
    {
        title: '区划名称',
        dataIndex: 'mofDivName',
        key: 'mofDivName',
        width: 100,
        align: 'center',
        fixed: 'left',
    },
    {
        title: '期初库款余额',
        dataIndex: 'beginningBalance',
        key: 'beginningBalance',
        width: 120,
        align: 'center',
        fixed: 'left',
    },
    {
        title: '期末库款余额',
        dataIndex: 'endingBalance',
        key: 'endingBalance',
        width: 120,
        align: 'center',
        fixed: 'left',
    },
    {
        title: '预警等级',
        dataIndex: 'warningLevel',
        key: 'warningLevel',
        width: 100,
        align: 'center',
        fixed: 'left',
    },
    {
        title: '本期库款流入',
        children: [
            {
                title: '本月收入（含政府性基金收入）',
                dataIndex: 'income01',
                key: 'income01',
                width: 160,
                align: 'center',
                progress: true,
            },
            {
                title: '发债收入',
                dataIndex: 'income02',
                key: 'income02',
                width: 120,
                align: 'center',
                progress: true,
            },
            {
                title: '上级转移支付',
                dataIndex: 'income03',
                key: 'income03',
                width: 120,
                align: 'center',
                progress: true,
            },
            {
                title: '援助资金',
                dataIndex: 'income04',
                key: 'income04',
                width: 120,
                align: 'center',
                progress: true,
            },
        ],
    },
    {
        title: '本期库款流出',
        children: [
            {
                title: '三保支出（除工资）',
                dataIndex: 'pay01',
                key: 'pay01',
                width: 120,
                align: 'center',
                progress: true,
            },
            {
                title: '工资',
                dataIndex: 'pay02',
                key: 'pay02',
                width: 120,
                align: 'center',
                progress: true,
            },
            {
                title: '还本付息支出',
                dataIndex: 'pay03',
                key: 'pay03',
                width: 120,
                align: 'center',
                progress: true,
            },
            {
                title: '对下转移支付',
                dataIndex: 'pay04',
                key: 'pay04',
                width: 120,
                align: 'center',
                progress: true,
            },
            {
                title: '定向支出',
                dataIndex: 'pay05',
                key: 'pay05',
                width: 120,
                align: 'center',
                progress: true,
            },
        ],
    },
];

let data = ref<any[]>([]);

let loading = ref(false);

const state = reactive({
    selectedRowKeys: [],
});
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
const onSelectChange = (selectedRowKeys,selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    console.log('selectedRowKeys changed: ', selectedRows);
    state.selectedRowKeys = selectedRowKeys;
};

// 分页
const pageSizeChange = (val, pageNum) => {
    pagination.pageSize = pageNum;
    pagination.current = 1;
    const params = {
        rows: pagination.pageSize,
        page: pagination.current,
    };
};

const pageChange = (page, val) => {
    pagination.current = page;
    const params = {
        rows: pagination.pageSize,
        page: pagination.current,
    };
    queryFun();
};

const pagination = reactive({
    current: 1,
    pageSize: 50,
    showSizeChanger: true,
    total: 0,
    pageSizeOptions: ['50', '100', '200', '500'],
    showTotal: (total) => `共 ${total} 条数据`,
    onShowSizeChange: pageSizeChange,
    onChange: pageChange,
});

// tempary data
const getTemData = () => {
    let temdata:any[] = (new Array(100)).fill(
        {
            mofDivCode:1,
            mofDivName:1,
            beginningBalance: 1,
            endingBalance:1,
            warningLevel: 2,
            income01: 3,
            income02: 4,
            income03: 4,
            income04: 5,
            pay01: 6,
            pay02: 6,
            pay03: 6,
            pay04: 2,
            pay05: 2
        })
    data.value = temdata
}

// 刷新
const refresh = () => {
    // topForm.value.amt_unit = 1;
    console.log('topForm-----', topForm);
    queryFun();
};

// 查询库款预警数据
const queryFun = () => {
    loading.value = true;
    let queryParams = {
        amt_unit: topForm.value.amt_unit,
        month: dayjs(topForm.value.yearAndmonth).get('month') + 1,
        year: dayjs(topForm.value.yearAndmonth).get('year'),
    };
    treasuryQuery(queryParams)
        .then((res: any) => {
            loading.value = false;
            if (res.state == '200') {
                data.value = res.data;
                message.success(res.msg || '库款预警数据查询成功！');
            } else {
                message.error(res.msg || '库款预警数据查询失败！');
            }
        })
        .catch((err) => {
            loading.value = false;
        });
};

onMounted(() => {
    queryFun();
    // getTemData()
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    padding: 20px;

    .content_opertors {
        display: flex;
        justify-content: space-between;
        height: 32px;
        margin-bottom: 20px;

        .left .ant-btn {
            margin-right: 16px;
        }

        .right .ant-form-item {
            margin-bottom: 0;
        }
    }
    .grid {
        height: calc(100% - 52px);
    }
    :deep(.ant-table-cell) {
        overflow: hidden;
    }
    :deep(.ant-table-body) {
        height: 100%;
    }
    :deep(.ant-progress-outer) {
        width: 120px;
    }
    :deep(.ant-progress-inner) {
        background-color: #cabfbf;
    }
    :deep(.ant-progress-text) {
        display: block;
    }
}
</style>
